<template>
    <div class="u-p-20">
        <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="历史趋势" name="history" v-if="hasPerm('userHistory')">
                <user-history v-if="activeName=='history'"></user-history>
            </el-tab-pane>
            <el-tab-pane label="新老用户" name="compare" v-if="hasPerm('userCompare')">
                <user-compare v-if="activeName=='compare'"></user-compare>
            </el-tab-pane>
            <el-tab-pane label="地域分析" name="area" v-if="hasPerm('userArea')">
                <user-area v-if="activeName=='area'"></user-area>
            </el-tab-pane>
            <el-tab-pane label="终端分析" name="terminal" v-if="hasPerm('userTerminal')">
                <user-terminal v-if="activeName=='terminal'"></user-terminal>
            </el-tab-pane>
            <el-tab-pane label="网络分析" name="network" v-if="hasPerm('userNetwork')">
                <user-network v-if="activeName=='network'"></user-network>
            </el-tab-pane>
            <el-tab-pane label="机型分析" name="machine" v-if="hasPerm('userMachine')">
                <user-machine v-if="activeName=='machine'"></user-machine>
            </el-tab-pane>
            <el-tab-pane label="分享分析" name="share" v-if="hasPerm('userShare')">
                <user-share v-if="activeName=='share'"></user-share>
            </el-tab-pane>
            <el-tab-pane label="使用时段分析" name="period" v-if="hasPerm('userPeriod')">
                <user-period v-if="activeName=='period'"></user-period>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import UserHistory from './user/history'
    import UserCompare from './user/compare'
    import UserArea from './user/area'
    import UserTerminal from './user/terminal'
    import UserNetwork from './user/network'
    import UserMachine from './user/machine'
    import UserShare from './user/share'
    import UserPeriod from './user/period'

    export default {
        components:{
            UserHistory,
            UserCompare,
            UserArea,
            UserTerminal,
            UserNetwork,
            UserMachine,
            UserShare,
            UserPeriod
        },
        data() {
            return {
                activeName:'history'
            }
        }
    }
</script>
